<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卖家管理中心 - 阿里宝宝</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <a href="index.html">
                        <i class="fas fa-shopping-bag"></i>
                        <span>阿里宝宝</span>
                    </a>
                </div>
                
                <nav class="nav">
                    <a href="seller-dashboard.html" class="nav-link active">
                        <i class="fas fa-tachometer-alt"></i>
                        仪表盘
                    </a>
                    <a href="seller-products.html" class="nav-link">
                        <i class="fas fa-box"></i>
                        商品管理
                    </a>
                    <a href="seller-orders.html" class="nav-link">
                        <i class="fas fa-shopping-cart"></i>
                        订单管理
                    </a>
                    <a href="seller-analytics.html" class="nav-link">
                        <i class="fas fa-chart-bar"></i>
                        数据分析
                    </a>
                </nav>
                
                <div class="header-actions">
                    <div class="user-menu">
                        <button class="user-btn" id="userMenuBtn">
                            <i class="fas fa-user-circle"></i>
                            <span id="userName">卖家用户</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="user-dropdown" id="userDropdown">
                            <a href="seller-profile.html">
                                <i class="fas fa-user"></i>
                                个人资料
                            </a>
                            <a href="seller-settings.html">
                                <i class="fas fa-cog"></i>
                                店铺设置
                            </a>
                            <hr>
                            <a href="#" id="logoutBtn">
                                <i class="fas fa-sign-out-alt"></i>
                                退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>卖家管理中心</h1>
                <p>欢迎回来，管理您的店铺和商品</p>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-box"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="totalProducts">0</h3>
                        <p>商品总数</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="totalOrders">0</h3>
                        <p>订单总数</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="totalRevenue">¥0</h3>
                        <p>总销售额</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="avgRating">0.0</h3>
                        <p>平均评分</p>
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="quick-actions">
                <h2>快速操作</h2>
                <div class="actions-grid">
                    <button class="action-btn" id="addProductBtn">
                        <i class="fas fa-plus"></i>
                        <span>添加商品</span>
                    </button>
                    
                    <button class="action-btn" id="viewOrdersBtn">
                        <i class="fas fa-list"></i>
                        <span>查看订单</span>
                    </button>
                    
                    <button class="action-btn" id="updateShopBtn">
                        <i class="fas fa-store"></i>
                        <span>更新店铺</span>
                    </button>
                    
                    <button class="action-btn" id="viewAnalyticsBtn">
                        <i class="fas fa-chart-line"></i>
                        <span>查看分析</span>
                    </button>
                </div>
            </div>

            <!-- 最近订单 -->
            <div class="recent-section">
                <div class="section-header">
                    <h2>最近订单</h2>
                    <a href="seller-orders.html" class="view-all">查看全部</a>
                </div>
                
                <div class="orders-table">
                    <table>
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>客户</th>
                                <th>商品</th>
                                <th>金额</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="recentOrdersTable">
                            <tr>
                                <td colspan="6" class="no-data">暂无订单数据</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 商品管理 -->
            <div class="products-section">
                <div class="section-header">
                    <h2>商品管理</h2>
                    <div class="section-actions">
                        <button class="btn btn-primary" id="addNewProductBtn">
                            <i class="fas fa-plus"></i>
                            添加商品
                        </button>
                    </div>
                </div>
                
                <div class="products-grid" id="productsGrid">
                    <div class="no-data">
                        <i class="fas fa-box"></i>
                        <p>暂无商品，点击上方按钮添加商品</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 添加商品模态框 -->
    <div class="modal" id="addProductModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加商品</h3>
                <button class="modal-close" id="closeAddProductModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="modal-body">
                <form id="addProductForm">
                    <div class="form-group">
                        <label for="productName">商品名称 *</label>
                        <input type="text" id="productName" name="name" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="productPrice">价格 (元) *</label>
                        <input type="number" id="productPrice" name="price" step="0.01" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="productCategory">商品分类 *</label>
                        <select id="productCategory" name="category" required>
                            <option value="">请选择分类</option>
                            <option value="Food">食品</option>
                            <option value="Clothing">服装</option>
                            <option value="Book">图书</option>
                            <option value="Electronic Products">电子产品</option>
                            <option value="Daily product">日用品</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="productLocation">产地 *</label>
                        <input type="text" id="productLocation" name="location" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="productStock">库存数量 *</label>
                        <input type="number" id="productStock" name="stock" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="productDescription">商品描述</label>
                        <textarea id="productDescription" name="description" rows="4"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="productImage">商品图片</label>
                        <input type="file" id="productImage" name="image" accept="image/*">
                        <div class="image-preview" id="imagePreview"></div>
                    </div>
                </form>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancelAddProduct">取消</button>
                <button type="submit" form="addProductForm" class="btn btn-primary">添加商品</button>
            </div>
        </div>
    </div>

    <!-- 更新店铺模态框 -->
    <div class="modal" id="updateShopModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>更新店铺信息</h3>
                <button class="modal-close" id="closeUpdateShopModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="modal-body">
                <form id="updateShopForm">
                    <div class="form-group">
                        <label for="shopName">店铺名称 *</label>
                        <input type="text" id="shopName" name="name" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="shopDescription">店铺描述</label>
                        <textarea id="shopDescription" name="description" rows="4"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="shopLogo">店铺Logo</label>
                        <input type="file" id="shopLogo" name="logo" accept="image/*">
                        <div class="image-preview" id="logoPreview"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="shopAddress">店铺地址</label>
                        <input type="text" id="shopAddress" name="address">
                    </div>
                    
                    <div class="form-group">
                        <label for="shopPhone">联系电话</label>
                        <input type="tel" id="shopPhone" name="phone">
                    </div>
                </form>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancelUpdateShop">取消</button>
                <button type="submit" form="updateShopForm" class="btn btn-primary">更新店铺</button>
            </div>
        </div>
    </div>

    <!-- 加载提示 -->
    <div class="loading" id="loading">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
    </div>

    <!-- 消息提示 -->
    <div class="toast" id="toast"></div>

    <!-- JavaScript -->
    <script src="js/api.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/seller-dashboard.js"></script>
</body>
</html>
